<template>
  <div class="shop-home">
    <div class="shop-home-navbar">
      <van-icon name="arrow-left" />
      <van-search v-model="value"
                  shape="round"
                  background="transparent"
                  placeholder="店内搜索" />
    </div>
    <div class="shop-home-name">
      <user-head name="美的旗舰店"
                 description="4.6万粉丝"></user-head>
      <van-button round
                  @click="followShop"
                  :loading="followLoading"
                  :class="isFollow ? 'follow-btn': ''">＋关注</van-button>
    </div>
    <van-tabs v-model="active"
              @click="tabClick">
      <van-tab title="精选"></van-tab>
      <van-tab title="商品"></van-tab>
    </van-tabs>
    <div class="shop-home-content">
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
import UserHead from '@/components/UserHead'
export default {
  data () {
    return {
      isFollow: false, // 是否关注
      followLoading: false,
      value: '',
      active: 0
    };
  },
  components: {
    UserHead
  },
  created () {
    this.$nextTick(() => {
      this.$router.push({ path: '/shopHome/shopChoice' }).catch(() => { })
    })
  },
  methods: {
    followShop () {
      console.log(111);
      this.followLoading = true;
      setTimeout(() => {
        this.isFollow = !this.isFollow
        this.followLoading = false;
      }, 1500);

    },
    tabClick (index) {
      if (index == 0) {
        this.$router.push({ path: '/shopHome/shopChoice' }).catch(() => { })
      } else {
        this.$router.push({ path: '/shopHome/shopGoods' }).catch(() => { })
      }
    }
  }
}

</script>

<style lang="scss">
.shop-home {
  @include top-page;
  background-color: #ffffff;
  .shop-home-navbar {
    @include header-top();
    @include flex-center;
    background-color: #eeeeee;
    .van-icon {
      font-size: 0.42rem;
      color: #666666;
    }
    .van-search__content--round {
      width: 6rem;
      border: 1px solid #fe4a09;
    }
  }
  .shop-home-name {
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    padding: 0.15rem 0.3rem;
    .van-button {
      width: 1.4rem;
      height: 0.5rem;
      font-size: 0.26rem;
      color: #ffffff;
      background: linear-gradient(90deg, #fa6630, #fe4a09);
      border: none;
    }
    .follow-btn {
      color: #666666;
      background: transparent;
      border: 1px solid #666666;
    }
  }
  .van-tabs__line {
    height: 0.03rem;
    background-color: #e93323;
    bottom: 0.42rem;
    width: 0.45rem;
  }
  .shop-home-content {
    flex: 1;
    overflow-y: auto;
    background-color: #eeeeee;
    padding-top: 0.15rem;
  }
}
</style>